<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-24 09:52:42
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-30 10:40:32
-->
<template>
  <x-tab :title="'公告信息'" :isShowExpand="false" :isShowMore="true" @on-More="handleMore">
    <el-scrollbar class="notice-list" v-if="tableData?.length">
      <div class="notice-item" v-for="(item, index) in tableData" :key="index" @click="handleClickItem(item)">
        <label :title="item.noticeTitle">{{ item.noticeTitle }}</label>
        <span class="notice-tims">
          {{ item.noticeTime.split(' ')[0] }}
        </span>
      </div>
    </el-scrollbar>
    <div class="no-data" v-else>
      <img src="../../../common/assets/images/no-data.png" class="no-data-img" />
    </div>
    <notice-detail ref="noticeInfoCom"></notice-detail>
  </x-tab>
</template>
<script>
  import { TableListMixin } from '@package/utils'
  import { noticeListUrl as listUrl } from '../api/index'
  import NoticeDetail from './noticeDetail.vue'

  export default {
    name: 'NoticeInfo',
    components: { NoticeDetail },
    mixins: [TableListMixin],
    data() {
      return {
        listUrl
      }
    },
    methods: {
      handleClickItem(noticeInfo) {
        this.$refs.noticeInfoCom.handleOpen(noticeInfo)
      },
      handleMore() {
        this.$router.push({
          path: '/noticeCenter'
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../style/home';
  // ::v-deep .x-tab-content {
  //   height: 100%;
  // }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0 !important;
  }
</style>
